<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../00-source//jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: yellow;
            position:relative;
        }
        p{
            width: 50px;
            height: 50px;
            background-color: rebeccapurple;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <script>
        // offsetLeft  offsetTop

        /*
            offset() 获取距离文档流左上角的left,top,
                        如果传参数就是设置而不是获取。
                        返回的是一个对象, 传进去的参数也应该是一个对象
        */
        // 获取    
        console.log($('div').offset());
        // 设置
        $('div').offset({
            left:100,
            top:100
        })

        /*
            position() 有定位元素的left、top
        */ 
       console.log($('p').position());
    </script>
</body>
</html>